[id].vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <template>
  2. <!-- 页面头部 -->
  3. <HomePageHead></HomePageHead>
  4. <!-- 导航栏 -->
  5. <HomePageNavigation></HomePageNavigation>
  6. <!-- 列表页广告一 -->
  7. <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
  8. <!-- 资讯列表 -->
  9. <div class="newsDetail">
  10. <div class="inner">
  11. <div class="innerLeft">
  12. <!-- 面包屑导航 -->
  13. <div class="breadcrumb">
  14. <div class="inner">
  15. <span class="location">当前位置:</span>
  16. <el-breadcrumb :separator-icon="ArrowRight">
  17. <el-breadcrumb-item>
  18. <NuxtLink to="/">首页</NuxtLink>
  19. </el-breadcrumb-item>
  20. <el-breadcrumb-item v-if="parent_name != ''">
  21. <NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
  22. </el-breadcrumb-item>
  23. <!-- <el-breadcrumb-item>
  24. <NuxtLink :to="`list-1.html`"> {{ routLevelTitle }}</NuxtLink>
  25. </el-breadcrumb-item> -->
  26. <el-breadcrumb-item>{{ routeNewsTtitle }}</el-breadcrumb-item>
  27. </el-breadcrumb>
  28. </div>
  29. </div>
  30. <div class="LeftTop">
  31. <h1>{{ newsDetail.title }}</h1>
  32. <p>
  33. 来源: <span>{{ newsDetail.copyfrom }}</span>
  34. 作者: <span>{{ newsDetail.author }}</span>
  35. 发布时间: <span>{{ time }}</span>
  36. </p>
  37. </div>
  38. <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content" @click="openPreview">
  39. </div>
  40. <div v-if="previewVisible" class="preview-modal" @click="closePreview">
  41. <img :src="selectedImage" alt="Preview">
  42. </div>
  43. <!-- 免责声明: -->
  44. <div class="disclaimer" v-if="newsDetail.copyfrom != '本网'">
  45. <p>原文链接:{{ newsDetail.fromurl }}</p>
  46. <p>[免责声明]本文来源于网络转载,仅供学习交流使用,不构成商业目的。 版权归原作者所有,如涉及作品内容,版权和其他问题,请在30日与本网联系,我们将第一时间处理。</p>
  47. </div>
  48. <div v-if="articleChoice">
  49. <HomeSurveyvote></HomeSurveyvote>
  50. </div>
  51. <!-- 推荐阅读 -->
  52. <div class="recommendRead" v-if="newsDetail.commendArticle != false">
  53. <div class="recommendReadTitle">
  54. 推荐阅读
  55. </div>
  56. <div class="recommendReadList">
  57. <div class="recommendReadListTitle" v-for="(item, index) in newsDetail.commendArticle"
  58. :key="item.id">
  59. <a :href="`/${item.alias_pinyin}/${item.id}.html`" v-if="index < 3">
  60. {{ item.title }}
  61. </a>
  62. <span v-if="index < 3">{{ getTime(item.created_at, "month", 1) }}</span>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="innerRight">
  68. <!-- 热点资讯1 -->
  69. <div class="hotList1">
  70. <DetailHotNews></DetailHotNews>
  71. </div>
  72. <!-- 热点资讯2 -->
  73. <div class="hotList2">
  74. <DetailHotNews2></DetailHotNews2>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <!-- 页面底部 -->
  80. <HomeFoot1></HomeFoot1>
  81. </template>
  82. <script setup>
  83. //1.页面依赖 start ---------------------------------------->
  84. import { onMounted } from 'vue'
  85. import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
  86. import { ArrowRight } from '@element-plus/icons-vue'
  87. //1.页面依赖 end ---------------------------------------->
  88. //2.页面路径 start ---------------------------------------->
  89. const targetSegment = getRoutePath(1);
  90. let routeId;
  91. //通过导航路径反向查询导航id
  92. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  93. method: 'GET',
  94. query: {
  95. 'pinyin': targetSegment,
  96. },
  97. });
  98. if (getRouteId.code == 200) {
  99. routeId = getRouteId.data.category_id
  100. } else {
  101. console.log("错误位置:获得页面路径")
  102. }
  103. //2.页面路径 start ---------------------------------------->
  104. //3.面包屑 start ---------------------------------------->
  105. const route = useRoute();
  106. const articleId = parseInt(route.params.id); //获得该页面的id
  107. //3.1 获得父级栏目的名称、id
  108. const parent_name = ref([]);
  109. const parent_id = ref([]);
  110. const parent_pinyin = ref("");
  111. const parent_children_count = ref(0)
  112. let getParentNav = async () => {
  113. const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
  114. method: 'GET',
  115. query: {
  116. 'catid': routeId
  117. },
  118. });
  119. if (listData.code == 200) {
  120. parent_name.value = listData.data.alias;
  121. parent_id.value = listData.data.parent_id;
  122. parent_pinyin.value = listData.data.aLIas_pinyin;
  123. parent_children_count.value = listData.data.children_count;
  124. } else {
  125. console.log("错误位置:获取面包屑导航")
  126. }
  127. }
  128. getParentNav();
  129. //3.页面依赖 end ---------------------------------------->
  130. //4.页面数据 start ---------------------------------------->
  131. //4.1 资讯详情
  132. const newsDetail = ref({})
  133. const routeNewsTtitle = ref("");
  134. //4.2 发布日期
  135. const time = ref("");
  136. //4.3 路径
  137. const routLevelTitle = ref("");
  138. const routLevelId = ref("");
  139. //4.4 是否展示投票
  140. const articleChoice = ref(false);
  141. //4.5 获取详情
  142. async function getPageData() {
  143. const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
  144. method: 'GET',
  145. query: {
  146. 'articleid': articleId
  147. },
  148. });
  149. if (mkdata.code == 200) {
  150. //判断是否显示投票
  151. if (mkdata.data.is_survey == 1) {
  152. console.log("本篇文章含有投票!")
  153. articleChoice.value = true;
  154. }
  155. //获取内容
  156. newsDetail.value = mkdata.data;
  157. //获取路径
  158. routLevelTitle.value = newsDetail.value.cat_name;
  159. routLevelId.value = newsDetail.value.category_id;
  160. //获取发布时间
  161. time.value = newsDetail.value.updated_at.split(' ')[0];
  162. //修正标题长度
  163. if (newsDetail.value.title.length >= 20) {
  164. routeNewsTtitle.value = newsDetail.value.title.substr(0, 20) + "...";
  165. } else {
  166. routeNewsTtitle.value = newsDetail.value.title
  167. }
  168. } else {
  169. console.log("错误位置:获取详情内容")
  170. }
  171. }
  172. getPageData();
  173. //4.页面数据 end ---------------------------------------->
  174. //5.广告 start ---------------------------------------->
  175. let adImg1 = ref([]);
  176. onMounted(async () => {
  177. const { $webUrl, $CwebUrl } = useNuxtApp();
  178. //广告1
  179. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snscw_detail_0001`
  180. const responseAd1 = await fetch(url, {
  181. headers: {
  182. 'Content-Type': 'application/json',
  183. 'Userurl': $CwebUrl,
  184. 'Origin': $CwebUrl
  185. }
  186. });
  187. const resultAd1 = await responseAd1.json();
  188. adImg1.value = resultAd1.data[0];
  189. //广告2
  190. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snscw_detail_0002`
  191. const responseAd2 = await fetch(url2, {
  192. headers: {
  193. 'Content-Type': 'application/json',
  194. 'Userurl': $CwebUrl,
  195. 'Origin': $CwebUrl
  196. }
  197. });
  198. const resultAd2 = await responseAd2.json();
  199. adImg2.value = resultAd2.data[0];
  200. })
  201. //5.广告 end ---------------------------------------->
  202. //6.设置seo信息 start---------------------------------------->
  203. const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
  204. method: 'GET',
  205. query: {
  206. 'articleid': articleId
  207. },
  208. });
  209. if (setData.code == 200) {
  210. let seoTitle = setData.data.title;
  211. let seoDescription = setData.data.introduce;
  212. let seoKeywords = setData.data.keyword;
  213. let seoSuffix = setData.data.suffix;
  214. let seoName = setData.data.website_name;
  215. useSeoMeta({
  216. title: seoTitle + "_" + seoName + "_" + seoSuffix,
  217. meta: [
  218. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  219. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
  220. ]
  221. });
  222. } else {
  223. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  224. console.log("错误位置:设置详情页面SEO数据")
  225. console.log("后端错误反馈:", setData.message)
  226. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  227. }
  228. //6.设置seo信息 end---------------------------------------->
  229. //8.页面图片放大 start---------------------------------------->
  230. const previewVisible = ref(false)
  231. const selectedImage = ref(' ')
  232. const openPreview = (event) => {
  233. if (event.target.tagName === 'IMG') {
  234. selectedImage.value = event.target.src;
  235. previewVisible.value = true;
  236. }
  237. }
  238. const closePreview = () => {
  239. previewVisible.value = false;
  240. }
  241. //8.页面图片放大 end---------------------------------------->
  242. </script>
  243. <style lang="less" scoped>
  244. @import url('@/assets/css/detail.less');
  245. </style>